<template>
    <fieldset v-if="theValue.group">
        <legend>{{theValue.label}}</legend>
        <item v-for="(v,k) in theValue.items" :value="v" :key="k" :label="k" :parent="theValue.items"
              @changed="change_handler"></item>
    </fieldset>
    <kv v-else ref="input" :class="{must:theValue.must}">
        <template slot="k">
            <label class="k" :class="{checked: theValue.type == Boolean && theValue.value == true}">
                {{theValue.label}}
            </label>
        </template>
        <template>
            <template v-if="theValue.type == Boolean">
                <label>
                    <input type="checkbox" v-model="theValue.value"/>
                    {{theValue.remark}}
                </label>
            </template>
            <template v-if="theValue.type == String">
                <div>
                    <input type="text" v-model="theValue.value" v-bind="{chk:theValue.must ? '*':''}"/>
                    {{theValue.remark}}
                </div>
            </template>

            <template v-if="theValue.type == Radio">
                <div style="display: inline-block">
                    <label class="radio" :class="{checked: item_value == v}" v-for="(v,i) in theValue.data">
                        <input :name="theValue.label" v-model="item_value" :value="v" type="radio"/>
                        {{v}}
                    </label>
                </div>
            </template>

            <template v-if="theValue.type == Array">
                <div style="display: block">
                    <button @click="del_click(v,i)" v-html="v" class="item" v-for="(v,i) in theValue.value"></button>

                    <div style="display: block">
                        <input v-model="item_value"/>
                        <button @click="add_click()" style="padding:6px">+</button>
                    </div>
                </div>
            </template>
        </template>
    </kv>
</template>
<style scoped>
    .must .k:before{
        content:"*";
        display: inline-block;
    }
    .must .k{
        color:red;
    }
    .v label {
        margin: 2px 10px 2px 0;
        padding: 3px 10px 3px 6px;
        display: inline-block;
    }

    .checked {
        border-radius: 8px;
        background-color: #8E388E;
        color: white;
    }

    .v button.item {
        display: flex;
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 5px 10px;
    }

    .v button.item:after {
        content: "×";
        display: inline-block;
        color: darkred;
        font-size: 20px;
        margin: -2px -10px -10px 10px;
    }
</style>
<script>

    export default {
        name: "item",
        props: ["value", "parent"],
        data() {
            return {
                item_value: "",
                theValue: {}
            };
        },
        mounted() {
            this.theValue = this.value;
        },
        methods: {
            add_click() {
                if (!this.item_value) {
                    return;
                }
                if (this.theValue.value.includes(this.item_value)) {
                    return;
                }
                this.theValue.value.push(this.item_value);
            },
            del_click(v, i) {
                this.item_value = v;
                this.theValue.value.removeAt(i)
            },
            change_handler(p, k, v) {
                p[k] = v;
                this.$emit("changed", p, k, v);
            }
        },
        watch: {
            "theValue": {
                deep: true,
                immediate: true,
                handler(v) {
                    if(!v.type || v.type != String) return ;
                    this.$nextTick(() => {
                        if (!this.$refs["input"]) return;
                        var input = this.$refs["input"].$el.getElementsByTagName("input")[0];
                        if (!input) return;

                        input.style.width = "100px";
                        input.style.width = (input.scrollWidth + 50) + "px";
                    });

                    this.$emit("changed", this.parent, this.theValue.label, v);
                }
            }
        }
    }
</script>
